{% block sw_first_run_wizard_finish %}
<div class="sw-first-run-wizard-finish">
    <div v-if="!restarting">
        <span class="sw-first-run-wizard-finish__bubble">
            <mt-icon
                class="sw-first-run-wizard-finish__icon"
                name="regular-checkmark-xs"
                size="18px"
            />
        </span>

        <h3 class="headline">
            {{ $tc('sw-first-run-wizard.finish.headlineAllDone') }}
        </h3>

        <p class="message">
            {{ successMessage }}
        </p>

        <h3 class="headline-useful-links">
            {{ $tc('sw-first-run-wizard.finish.headlineUsefulLinks') }}
        </h3>

        <div class="list-useful-links">
            <mt-link
                :to="$tc('sw-first-run-wizard.finish.documentationUrl')"
                variant="primary"
                type="external"
                target="_blank"
            >
                {{ $tc('sw-first-run-wizard.finish.documentationLabel') }}
            </mt-link>

            <mt-link
                :to="$tc('sw-first-run-wizard.finish.forumUrl')"
                variant="primary"
                type="external"
                target="_blank"
            >
                {{ $tc('sw-first-run-wizard.finish.forumLabel') }}
            </mt-link>

            <mt-link
                :to="$tc('sw-first-run-wizard.finish.roadmapUrl')"
                variant="primary"
                type="external"
                target="_blank"
            >
                {{ $tc('sw-first-run-wizard.finish.roadmapLabel') }}
            </mt-link>
        </div>
    </div>

    <div
        v-else
        class="restart-progress"
    >
        <sw-loader />

        <p
            class="sw-loader-info-text"
            v-html="$tc('sw-first-run-wizard.finish.loadingMessage')"
        ></p>
    </div>
</div>
{% endblock %}
